<template>
	<view>
		<NavBar text='报告单详情' />
		<view style="width: 100%; height: 153rpx;"></view>
		<view class="meinfostyle">
			<view class="flx1">
				<view>产品：</view>
				<view>{{meinfo.name}}</view>
			</view>
			<view class="flx1">
				<view>检测人：</view>
				<view>{{meinfo.qcrname}}</view>
			</view>
			<view class="flx1">
				<view>性别：</view>
				<view>{{meinfo.sex}}</view>
			</view>
			<view class="flx1">
				<view>年龄：</view>
				<view>{{meinfo.age}}岁</view>
			</view>
			<view class="flx1">
				<view>报告编号：</view>
				<view>{{meinfo.number}}</view>
			</view>
		</view>
		<view class="bg_">
			<view class="bg_backgrpund">报告详情</view>
			<view class="bg_backgrpund_text">本次检测中，您所检测的指标均在正常范围内请继续保持哟!</view>
			<view style="width: 100%; height: 20rpx;"></view>
		</view>
		<view style="width: 90%; margin:0 auto; margin-top:20rpx; font-size: 30rpx; font-weight: 600; color: #fc1f1f;">本报告单根据您此次填写的资料( 年龄、性别等)，进行检测项目的结果解读，仅供参考。</view>
		<view style="margin-top:20rpx;" class="style_xm">
			<view class="style_xm_header">检测项目</view>
			<view style="width: 90%; margin:0 auto;">
				<u-collapse
				   @change="change"
				   @close="close"
				   @open="open"
				 >
				   <u-collapse-item
				     title="糖类抗原15-3(CA153)"
				     name="Docs guide"
				   >
				     <text class="u-collapse-content">涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</text>
				   </u-collapse-item>
				   <u-collapse-item
				     title="前列腺特异性抗原(PSA)"
				     name="Variety components"
				   >
				     <text class="u-collapse-content">内容内容</text>
				   </u-collapse-item>
				   <u-collapse-item
				     title="肝功能8项"
				     name="Numerous tools"
				   >
				     <text class="u-collapse-content">内容内容</text>
				   </u-collapse-item>
								<u-collapse-item
								  title="肾功能5项"
								  name="Numerous tools"
								>
								  <text class="u-collapse-content">内容内容</text>
								</u-collapse-item>
				 </u-collapse>
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NarBar.vue'
	export default {
		components: {
			NavBar
		},
		data(){
			return{
				meinfo:{
					name:'金秋体检(男士)',
					qcrname:'何沫',
					sex:'男',
					age:'28',
					number:'H17X01906524'
				}
			}
		},
		methods:{
			 open(e) {
			        // console.log('open', e)
			      },
			      close(e) {
			        // console.log('close', e)
			      },
			      change(e) {
			        // console.log('change', e)
			      }
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}
	.meinfostyle{
		width: 90%;
		margin:0 auto;
		font-size: 30rpx;
		line-height: 70rpx;
		font-weight: 600;
	}
	.bg_{
		width: 90%;
		background-color: #fff;
		border-radius: 25rpx;
		overflow: hidden;
		box-sizing: border-box;
		margin:0 auto;
		.bg_backgrpund{
			margin-top:20rpx;
			text-align: center;
			font-size: 40rpx;
			font-weight: 600;
			color:#70ccf2;
		}
		.bg_backgrpund_text{
			width: 90%;
			margin:0 auto;
			font-size: 30rpx;
			font-weight: 600;
			margin-top:20rpx;
		}
	}
		
	.style_xm{
		width: 90%;
		margin:0 auto;
		margin-top:20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.style_xm_header{
			text-align: center;
			text-align: center;
			font-size: 40rpx;
			font-weight: 600;
			color:#70ccf2;
			line-height: 80rpx;
		}
	}

</style>